<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <fieldset class="table-search-fieldset">
            <legend>Docker Image 信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">

                        <div class="layui-inline">
                            <label class="layui-form-label">docker</label>
                            <div class="layui-input-inline">
                                <select name="dockerId" id="dockerId">

                                </select>
                            </div>

                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">类型</label>
                            <div class="layui-input-inline">
                                <select name="imageType" id="imageType">
                                    <option value="all">所有</option>
                                    <option value="parentIdNotEmpty" selected  >自建</option>
                                </select>
                            </div>

                        </div>

                        <div class="layui-inline">
                            <button  class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>



        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>



    </div>
</div>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;

        $.ajax({
            url: '../docker/image/listDockerApiRecord',
            type: 'POST',
            data: {},
            async: false,
            success: function (result) {

                if (result.code === 10000) {
                    $('#k8sId').empty()
                    const selectList = result.data || []
                    selectList.forEach((selectItem, selectIndex) => {
                        $('#dockerId').append(`<option value="${selectItem.id}" ${selectIndex === 0?'selected':''} >${selectItem.dockerName}</option>`)
                    })
                    // $('#k8sId').append(`<option value="1"  >123</option>`)
                    form.render()

                    console.log( $('#dockerId').val())

                } else {
                    parent.layer.alert(result.msg)
                }

            }
        })


        function renderTable () {
            console.debug(`$('#dockerId').val()`, $('#dockerId').val() === null)
            if ($('#dockerId').val() === null) {
                return
            }
            table.render({
                elem: '#currentTableId',
                url: '../docker/image/listAll?imageType='+$("#imageType").val() + "&dockerId="+$('#dockerId').val(),
                toolbar: '#toolbarDemo',
                defaultToolbar: ['filter', 'exports', 'print', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
                cols: [[
                    // {type: "checkbox", width: 50},
                    // {field: 'uid', width: 80, title: 'ID', sort: false},
                    {field: 'Id',   title: 'IMAGE ID',width: 200},
                    {field: 'Tags', minWidth: 200, title: 'Tags', templet: function (row) {
                            const labelTextArr = []

                            const tags = row.RepoTags || []
                            tags.forEach(item => {
                                const splitArr = item.split(':')
                                const REPOSITORY = splitArr[0]
                                const TAG = splitArr[1]
                                const buttonElement = $(`<button class="layui-btn layui-btn-xs layui-btn-primary layui-border-blue"></button>`)[0]
                                buttonElement.innerText = REPOSITORY + ":" + TAG
                                // window.buttonElement = buttonElement
                                labelTextArr.push(buttonElement.outerHTML)
                            })
                            return labelTextArr.join('')
                        }},
                    {field: 'labels', minWidth: 200, title: 'labels', templet: function (row) {
                            const labelTextArr = []

                            const labels = row.Labels || {}
                            const keys = Object.keys(labels)
                            keys.forEach(item => {

                                const buttonElement = $(`<button class="layui-btn layui-btn-xs layui-btn-normal"></button>`)[0]
                                buttonElement.innerText = item + "=" + labels[item]
                                // window.buttonElement = buttonElement
                                labelTextArr.push(buttonElement.outerHTML)
                            })
                            return labelTextArr.join('')
                        }},
                    {field: 'Created', width: 160, title: 'Created',align:'center', templet: function (row) {
                            return new Date(row.Created * 1000).toLocaleString()
                        }},
                    {field: 'Size', width: 80, title: 'Size', templet: function (row) {
                            let size = row.Size
                            let sizeText = size + 'B'
                            const divi = 1000
                            if (size/divi > 1) {
                                size = parseInt(size/divi)
                                sizeText = size + 'KB'
                            }
                            if (size/divi > 1) {
                                size = parseInt(size/divi)
                                sizeText = size + 'MB'
                            }
                            if (size/divi > 1) {
                                size = parseInt(size/divi)
                                sizeText = size + 'GB'
                            }

                            return sizeText


                        } },
                    {title: '操作', width: 120,   align: "center", templet: row => {
                        return `<button class="layui-btn layui-btn-xs layui-btn-primary layui-border-red" lay-event='delete'>删除</button>`
                        }}
                ]],
                // limits: [10, 15, 20, 25, 50, 100],
                // limit: 15,
                page: false,
                limit: Number.MAX_VALUE,
                skin: 'row',
                parseData: function(res){ //res 即为原始返回的数据
                    return {
                        "code": res.code === 10000?0:500, //解析接口状态
                        "msg": res.code === 10000?'查询成功':res.msg, //解析提示文本
                        "count": res.data?.length || 0, //解析数据长度
                        "data": res.data //解析数据列表
                    };
                }
            });
        }

        renderTable()

        table.on('tool(currentTableFilter)', (obj)=> {

            if (obj.event === 'delete') {

                layer.confirm('确定删除?可能会影响二次发布', {icon: 3, title:'提示'}, function(index){
                    $.ajax({
                        url: '../docker/image/deleteDockerImage',
                        type: 'POST',
                        data: {
                            dockerId: $('#dockerId').val(),
                            imageId: obj.data.Id.substring(7)
                        },
                        success: function (result) {
                            console.log(result)
                            if (result.code === 10000) {
                                renderTable()
                            } else {
                                parent.layer.alert(result.msg, function(alertIndex){
                                    //do something

                                    parent.layer.close(alertIndex);
                                    if (result.msg.indexOf('must be forced') !== -1) {
                                        layer.confirm('是否强制删除?', {icon: 3, title:'提示'}, function(cindex){
                                            $.ajax({
                                                url: '../docker/image/forceDeleteDockerImage',
                                                type: 'POST',
                                                data: {
                                                    dockerId: $('#dockerId').val(),
                                                    imageId: obj.data.Id.substring(7)
                                                },
                                                success: function (result) {
                                                    console.log(result)
                                                    if (result.code === 10000) {
                                                        renderTable()
                                                    } else {
                                                        parent.layer.alert(result.msg)

                                                    }

                                                }
                                            })
                                            layer.close(cindex);
                                        });



                                    }
                                })



                            }

                        }
                    })
                    layer.close(index);
                });

            }


        })


        form.on('submit(data-search-btn)', function (data) {
            renderTable()
            return false
        })



    });
</script>

</body>
</html>
